<script setup>
import { Close, FullScreen, MoreFilled,Folder,ChatDotRound,Iphone} from '@element-plus/icons-vue'
import { inject, ref,nextTick } from 'vue'
const {currentPerson, sendMsg} = inject('chatDetailInfo')
const pic = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
const textarea = ref('')
nextTick(() => {
        let div = document.getElementById('data-list-content')
        div.scrollTop = div.scrollHeight
      })
</script>
<template>
    <div class="right-main">
        <div class="main-top">
            <span style="padding-right: 20px;"><el-icon :size="15"><FullScreen /></el-icon></span>
            <span><el-icon :size="15"><Close /></el-icon></span>
        </div>
        <div class="main-title"> 
            <div>
                <span v-if="currentPerson" style="font-size: 18px;">{{currentPerson.name}}</span>
                <span style="float:right"><el-icon :size="15"><MoreFilled /></el-icon></span>
            </div>
        </div>
        <div class="main-content" id="data-list-content">
            <div v-if="currentPerson" v-for="content in currentPerson.chatList">
                <div :class="[content.type===0 ? 'me' : 'you']">
                    <span :class="[content.type===0 ? 'float-right':'float-left']">
                        <el-avatar shape="square" :size="40" fit="cover" :src="pic" /> 
                    </span>
                    <div class="chatBox">{{content.mess}}</div>
                </div>
            </div>
        </div>
        <div class="main-func">
            <span><el-icon><Folder /></el-icon></span>
            <span style="padding-left: 15px;"><el-icon><ChatDotRound /></el-icon></span>
            <span style="float:right"><el-icon><Iphone /></el-icon></span>
        </div>
        <div class="main-input">
            <el-input
                v-model="textarea"
                :rows="2"
                type="textarea"
                placeholder="Please input"
                @keyup.enter="sendMsg(currentPerson,textarea)"
            />
        </div>
        <div class="main-bottom">
            <el-button @click="sendMsg(currentPerson,textarea)">发送</el-button>
        </div>
    </div>
    
</template>
<style scoped>
.main-top {
    float: right;
    padding: 5px 5px 0px 0px;
}
.main-title{
    height: 60px;
    border-bottom: 1px solid rgb(222, 222, 222);
}
.main-title div{
    padding-top: 26px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
.main-content {
    height: 300px;
    border-bottom: 1px solid rgb(222, 222, 222);
    overflow: auto;
    padding: 10px 0 10px 0;
}
.main-content .me {
    text-align: right;
    margin-right: 20px;
    margin-top: 10px;
}
.main-content .you {
    margin-left: 20px;
    margin-top: 10px;
}
.main-content .you .chatBox {
    display: inline-block;
    border: 1px solid #fff;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    margin-left: 10px;
}
.main-content .you .chatBox::before{
    position: absolute;
    content: '';
    top: 10px;
    /* left: 37px; */
    left: -9px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
} 

.main-content .me .chatBox {
    display: inline-block;
    border: 1px solid #fff;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(149, 236, 105);
    margin-right: 10px;
}
.main-content .me .chatBox::after{
    position: absolute;
    content: '';
    top: 10px;
    border: 8px solid transparent;
    border-left-color: rgb(149, 236, 105);
    right: -16px;
} 
.main-func{
    padding: 10px 10px 0px 10px;
}
.main-input{
    height: 160px;
}
.main-bottom{
    float: right;
    padding-right: 15px;
}
.right-main {
    width: 600px;
    min-height: 600px;
    height: 100%;
    overflow: hidden;
    background-color: rgb(245, 245, 245);
    border-right: 1px solid rgb(222, 222, 222);
}
</style>